<template>
  <el-container>
    <basic-crud :option="option" businessUrl="/permission/buttonController">
      <template #iconCss="{ row }">
        <el-icon v-if="row.iconCss">
          <component :is="row.iconCss"></component>
        </el-icon>
      </template>
      <template #preview="{ row }">
        <el-button
          :type="row.color.split('/')[1]"
          :link="row.color.split('/')[0] === 'text'"
          :icon="row.iconCss"
          size="small"
          >{{ row.name }}</el-button
        >
      </template>
      <template #iconCss-form="{ disabled, formData }">
        <cl-icon-select
          v-model="formData.iconCss"
          :disabled="disabled"
          placeholder="请选择 图标"
        ></cl-icon-select>
      </template>
      <template #color-form="{ disabled, formData }">
        <el-select
          v-model="formData.color"
          placeholder="请选择颜色"
          :disabled="disabled"
        >
          <el-option
            v-for="item in colorList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <div style="text-align: center">
              <el-button
                :type="item.value.split('/')[1]"
                :link="item.value.split('/')[0] === 'text'"
                style="width: 80%"
                size="small"
                >{{ item.label }}
              </el-button>
            </div>
          </el-option>
        </el-select>
      </template>
    </basic-crud>
  </el-container>
</template>

<script setup>
const colorList = [
  { value: 'text/primary', label: '文字/主要' },
  { value: 'text/success', label: '文字/成功' },
  { value: 'text/info', label: '文字/主要' },
  { value: 'text/warning', label: '文字/警告' },
  { value: 'text/danger', label: '文字/危险' },
  {
    value: 'button/primary',
    label: '按钮/主要',
  },
  { value: 'button/success', label: '按钮/成功' },
  { value: 'button/info', label: '按钮/信息' },
  {
    value: 'button/warning',
    label: '按钮/警告',
  },
  { value: 'button/danger', label: '按钮/危险' },
]
const option = {
  menuWidth: 200,
  searchShow:false,
  selection: false,
  calcHeight:10,
  column: [
    {
      label: '编号',
      prop: 'code',
      search: true,
      sortable: true,
      showWordLimit: true,
      rules: [{ required: true, message: '请输入编号', trigger: 'blur' }],
    },
    {
      label: '名称',
      prop: 'name',
      search: true,
      sortable: true,
      showWordLimit: true,
      rules: [{ required: true, message: '请输入名称', trigger: 'blur' }],
    },
    {
      label: '按钮位置',
      type: 'select',
      prop: 'buttonType',
      slot: true,
      sortable: true,
      rules: [{ required: true, message: '请选择按钮位置', trigger: 'change' }],
      dicData: [
        {
          label: '表外',
          value: 'out_table',
        },
        {
          label: '行内',
          value: 'in_line',
        },
      ],
    },
    {
      label: '按钮格式',
      prop: 'color',
      slot: true,
      width: '120',
      sortable: true,
      rules: [{ required: true, message: '请选择按钮格式', trigger: 'change' }],
      formatter: (val, value) => {
        return colorList.find((item) => item.value === value)?.label
      },
    },
    {
      label: '图标',
      prop: 'iconCss',
      slot: true,
      width: '80',
    },
    {
      label: '方法名',
      prop: 'functionName',
    },
    {
      label: 'if表达式',
      prop: 'expression',
    },
    {
      label: '按钮预览',
      prop: 'preview',
      display: false,
    },
  ],
}
</script>

<style lang="scss" scoped>

</style>
